<template>
	<view class="container">
		<view class="uni-padding-warp uni-common-mt">默认样式</view>
		<view>
			<checkbox-group>
				<checkbox value="cb1" checked="true">选中</checkbox>
				<checkbox value="cb">未选中</checkbox>
			</checkbox-group>
		</view>
		
		<view class="uni-title uni-common-mt">不同颜色和尺寸的checkbox</view>
		<view>
			<checkbox-group>
				<label style="background-color: #fd585858;">
					<checkbox value="cb1" checked="true" style="transform: scale(1.0);">选中</checkbox>
				</label>
				<label>
					<checkbox value="cb" checked="true" style="transform: scale(1.0);">未选中</checkbox>
				</label>
			</checkbox-group>
		</view>
		
		<view class="uni-title uni-common-mt">推荐展示样式</view>
		<view class="uni-list">
			<checkbox-group @change="checkboxChange">
				<label class="uni-list-cell uni-cell-pd" v-for="item in items" :key="item.value"
				style="background-color: ;">
				<view>
					<checkbox :value="item.value" :checked="item.checked"></checkbox>
				</view>
				<view>{{item.name}}</view>
				</label>
			</checkbox-group>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items:[
					{value:'usa',name:'美国',checked:false},
					{value:'china',name:'中国',checked:false},
					{value:'brazil',name:'巴西',checked:false},
					{value:'japan',name:'日本',checked:false},
					{value:'uk',name:'英国',checked:false},
					{value:'france',name:'法国',checked:false},
				]
			};
		},
				methods: {
					checkboxChange(e) {
						const selectedValues = e.detail.value;
						// 遍历更新选中状态
						this.items.forEach(item => {
							item.checked = selectedValues.includes(item.value);
							console.log('国家: ${item.name}, 是否选中: ${item.checked}');
						});
					}
				}
	}
</script>

<style>

</style>
